<template>
  <article>
    <h4 class="title">-&nbsp;{{licaititle}}&nbsp;-</h4>
    <div class="licai">
      <div class="licai-info" v-for="item of licailist" :key="item.id">
        <p class="licai-title">
          <span>{{item.title}}</span>
          <label v-if="item.youhui !== ''">{{item.youhui}}</label>
        </p>
        <p class="value">{{item.value}}</p>
        <p class="desc">{{item.desc}}</p>
      </div>
    </div>
  </article>
</template>

<script>
export default {
  name: 'Content',
  data () {
    return {}
  },
  props: {
    licaititle: String,
    licailist: Array
  }
}
</script>

<style lang="stylus" scoped>
  article
    margin-bottom 20px
    height 548px
    .title
      font-size 32px
      font-weight 700
      height 112px
      display flex
      justify-content center
      align-items center
    .licai
      display flex
      flex-flow row wrap
      .licai-info
        display flex
        width 343px
        height 218px
        padding-left 32px
        flex-direction column
        .licai-title
          margin 34px 0 16px
          color #333
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
          height 42px
          line-height 42px
          span
            font-size 30px
            font-weight 700
          label
            font-size 22px
            color #FF5155
            padding 0 8px
            text-align center
            border 1px solid #FF5155
        .value
          font-weight 700
          font-size 44px
          height 58px
          line-height 58px
          color #FF5155
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
        .desc
          font-size 24px
          height 34px
          line-height 34px
          color #999
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
</style>
